﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>不良品管理</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>

<body class="layui-padding-3">
    <style>
        .demo-login-container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
        }

        .layui-form-item.layui-inline {
            width: 48%; /* 设置每个表单项的宽度 */
            margin-right: 4%; /* 添加间距 */
            box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
        }

            .layui-form-item.layui-inline:nth-child(2n) {
                margin-right: 0; /* 去除每行第二个元素的右边距 */
            }

        .layui-form-label {
            width: 90px; /* 根据需要调整标签宽度 */
        }

        .layui-input-block, .layui-input-inline {
            margin-left: 70px; /* 确保输入框与标签对齐 */
        }

        .layui-form-select {
            width: 189px;
        }
    </style>
    <table class="layui-hide" id="ID-treeTable-demo"></table>
    <script type="text/html" id="TPL-treeTable-demo">

              <form  class="layui-form" action="" style="margin:25px">
                <div>
                     <input type="text" id="productName" placeholder="产品名称" class="layui-input" style="width: 300px; display: inline-block;">
                     <input type="text" id="productNumber" placeholder="产品编码" class="layui-input" style="width: 300px; display: inline-block;">
                     <input type="text" id="productSpecification" placeholder="产品规格" class="layui-input" style="width: 300px; display: inline-block;">

                    <button type="button" class="layui-btn layui-bg-blue" onclick="search1()"> <i class="layui-icon layui-icon-search"></i>查询</button>
                    <button type="button" lay-on="test-page-custom" class="layui-btn layui-bg-green" >新增</button>
                </div>
            </form>




        <div class="layui-form-item">
            <div class="layui-inline">
            </div>

        </div>
    </script>


    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
    <script>
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var treeTable, layer;
        var util = layui.util;
        // 先获取元素的值，此时元素已经在前面的HTML中定义了，能获取到


        layui.use(['layer', 'form'], function () {


            var productName = $("#productName").val() ;
            var productNumber = $("#productNumber").val() ;
            var productSpecification = $("#productSpecification").val() ;
            treeTable = layui.treeTable;
            layer = layui.layer;
            // 获取分页参数
            var pageIndex = 1;
            var pageSize = 10;




            // 渲染函数，将查询操作封装在里面，方便点击查询按钮时调用
            function renderTable() {
                var requestData = {
                    pageIndex: 1,
                    pageSize: 10,
                    productName: productName || "",
                    productNumber: productNumber || "",
                    productSpecification: productSpecification || "" 
                };
                console.log(requestData);
                // 渲染
                var inst = treeTable.render({
                    elem: '#ID-treeTable-demo',
                    // 拼接上分页参数到URL
                    url: '@ViewBag.GlennQuigmrire' + '/api/Materials/MaterilSearch?PageIndex=' + pageIndex + '&PageSize=' + pageSize + '&ProductNumber=' + requestData.productNumber + '&ProductName=' + requestData.productName + '&ProductSpecification=' + requestData.productSpecification,
                    tree: {
                        // 启用树形结构
                        iconIndex: 0, // 树节点的图标列，0表示使用第一列作为图标列
                        idField: 'materialId',  // 唯一标识字段
                        pidField: 'parentId',  // 父级字段
                        // childrenField: 'children'  // 默认情况下会自动从数据中读取 children 字段，所以不需要显式声明
                    },
                    
                    maxHeight: '501px',
                    toolbar: '#TPL-treeTable-demo',
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            {
                                field: 'materialId',
                                title: 'ID',
                                width: 80,
                                sort: true,
                                fixed: 'left',
                            },
                            { field: 'productName', title: '产品名称', width: 180, fixed: 'left' },
                            { field: 'productNumber', title: '产品编码', width: 120 },
                            { field: 'productSpecification', title: '产品规格', width: 120 },
                            { field: 'unitName', title: '单位', width: 120 },
                            { field: 'unitMach', title: '单位用量', width: 120 },
                            { field: 'parentName', title: '父分类', width: 120 },
                            { field: 'createName', title: '创建人', width: 100 },
                            { field: 'createDate', title: '创建时间', width: 180, sort: true },
                        ]
                    ],
                    page: true,
                    done: function (res, curr, count) {
                        // 处理返回的数据，treeTable 已经自动解析了树形结构
                        console.log(res); // 你可以在这里检查返回的数据结构是否符合预期
                    }
                });
            }

            
            //文档就绪
            $(function () 
            {
                renderTable();
            });
           //查询方法
             window.search1=function () {
                productName = $("#productName").val() || "";
                productNumber = $("#productNumber").val() || "";;
                productSpecification = $("#productSpecification").val() || "";    // 显示填写结果，仅作演示用
                renderTable();
            }

            // 事件
            util.on('lay-on', {
                'test-page-custom': function () {
                    layer.open({
                        type: 2,
                        area: ['1500px', '800px'],
                        shadeClose: true,
                        title: '物料清单（tree）(新增)',
                        content: '/Materials/AddFormView',

                    });
                }
            });

        });



    </script>




</body>
</html>